
function buildGrids(data) {
	
	var canvas = $(data.root).get(0);
	var ctx = canvas.getContext("2d");
		
	ctx.lineWidth = 0.5;
	ctx.strokeStyle = data.color;

	// horizontal grid lines
	for ( var i = 0; i <= canvas.height; i = i + data.gridPixelSize) {
		ctx.beginPath();
		ctx.moveTo(0, i);
		ctx.lineTo(canvas.width, i);
		if (i % parseInt(data.grap) == 0) {
			ctx.lineWidth = 2;
		} else {
			ctx.lineWidth = 0.5;
		}
		ctx.closePath();
		ctx.stroke();
	}

	// vertical grid lines
	for ( var j = 0; j <= canvas.width; j = j + data.gridPixelSize) {
		ctx.beginPath();
		ctx.moveTo(j, 0);
		ctx.lineTo(j, canvas.height);
		if (j % parseInt(data.grap) == 0) {
			ctx.lineWidth = 2;
		} else {
			ctx.lineWidth = 0.5;
		}
		ctx.closePath();
		ctx.stroke();
	}

}
